<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算星座学</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet" />
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
    /*.mui-content{
    	background: #fff;
    	padding: center center;
    }*/
    	.image{
    		margin-left: 20px;
    		margin-top: 80px;
    		margin-bottom: 30px;
    		padding: center center;
    	}
    </style>
	</head>
	<body>
	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">计算星座学</h1>
		</header>
		<!--<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active" href="#tab1">
		        首页
		    </a>
		    <a class="mui-tab-item" href="#tab2">
		        星座排名
		    </a>
		    <a class="mui-tab-item" href="#tab3">
		        职业排名
		    </a>
		    <a class="mui-tab-item" href="#tab4">
		        职业距离
		    </a>
		</nav>-->
			<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tab1">
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tab2">
				<span class="mui-tab-label">星座排名</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-tab-label">职业排名</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-tab-label">职业距离</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tab1" class="mui-control-content mui-active">
			<!--<img src="images/0bg.jpg"  usemap="#rouletteMap" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;" />-->
			<div class="image">
			<img src="images/0bg.jpg" usemap="#rouletteMap"/></div>
			<map name="rouletteMap" id="rouletteMap">
                        <area date-name="Aquarius" shape="poly" coords="123,134,127,128,134,123,75,23,46,44,21,76" href="Aquarius.html" alt='水瓶' data-index="0"  />
                        <area date-name="Capricorn" shape="poly" coords="135,122,142,120,150,119,150,2,113,7,77,22" href="Capricorn.html" alt='摩羯' data-index="1" />
                        <area date-name="Sagittarius" shape="poly" coords="152,118,158,120,165,122,225,23,188,8,152,3" href="Sagittarius.html" alt='射手' data-index="2"/>
                        <area date-name="Scorpio" shape="poly" coords="166,124,172,128,177,135,279,77,225,22" href="Scorpio.html" alt='天蝎' data-index="3"/>
                        <area date-name="Libra" shape="poly" coords="178,136,182,151,299,151,294,115,279,77" href="Libra.html" alt="天秤" data-index="4" />
                        <area date-name="Virgo" shape="poly" coords="182,151,178,166,279,224,294,189,297,152" href="Virgo.html" alt='处女' data-index="5"/>
                        <area date-name="leo" shape="poly" coords="166,178,178,166,279,224,254,257,225,279" href="leo.html" alt='狮子' data-index="6"/>
                        <area date-name="Cancer" shape="poly" coords="151,183,165,179,225,279,188,294,150,297" href="Cancer.html" alt='巨蟹' data-index="7" />
                        <area date-name="Gemini" shape="poly" coords="134,179,150,182,150,298,110,293,76,279" href="Gemini.html" alt='双子' data-index="8"/>
                        <area date-name="Taurus" shape="poly" coords="121,167,134,178,76,279,42,253,21,225" href="Taurus.html" alt='金牛' data-index="9"/>
                        <area date-name="Aries" shape="poly" coords="117,151,122,168,21,224,1,152" href="Aries.html" alt='白羊' data-index="10"/>
                        <area date-name="Pisces" shape="poly" coords="117,148,122,134,21,77,1,151" href="Pisces.html" alt='双鱼' data-index="11"/>

                    </map>
			</div>
			<div id="tab2" class="mui-control-content">
			<div class="mui-card">
				<ul class="mui-table-view mui-table-view-chevron">
					<!--<li class="mui-table-view-cell">card（圆角列表）
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</li>-->
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">演员</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">演员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">成人电影演员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">喜剧演员</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">建筑师</a>
							</li>
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">艺术家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">艺术家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">音乐家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">画家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">歌唱家</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">无神论者</a>
							</li>
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">运动员</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">国际象棋手</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">自行车运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">足球运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">相扑运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">兵乓球运动员</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">商人</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">CEO</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">厨师</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">宗教人士</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">大主教</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">神职人员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">教皇</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">圣徒</a>
							</li>
						</ul>
					</li>
		<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">罪犯</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">工程师</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">法官</a>
							</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">同性恋</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">文学家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">小说家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诗人</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">作家</a>
							</li>
						</ul>
					</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">文学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">和平奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生理或医学奖</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">哲学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">花花公子封面女郎</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">政治家</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">科学家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">科学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生物学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">计算机科学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">数学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理学家</a>
							</li>
						</ul>
					</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">间谍</a>
							</li>
				</ul>
			</div>
			</div>
			<div id="tab3" class="mui-control-content">
			</div>
			<div id="tab4" class="mui-control-content">
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
//		window.addEventListener('toggle', function(event) {
//			if (event.target.id === 'M_Toggle') {
//				var isActive = event.detail.isActive;
//				var table = document.querySelector('.mui-table-view');
//				var card = document.querySelector('.mui-card');
//				if (isActive) {
//					card.appendChild(table);
//					card.style.display = '';
//				} else {
//					var content = document.querySelector('.mui-content');
//					content.insertBefore(table, card);
//					card.style.display = 'none';
//				}
//			}
//		});
	</script>
</html>
